<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
            <el-input v-model="username" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="角色">
            <el-select v-model="roles" placeholder="请选择">
                <el-option v-for="item in roles_list" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-container>
        <el-header><el-button type="primary" :icon="add" @click="dialogFormVisible = true">新增用户</el-button></el-header>
        <el-main><el-table :data="tableData" style="width: 100%">
                <el-table-column label="ID" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" width="180">
                    <template #default="scope">
                        <div>{{ scope.row.username }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" width="180">
                    <template #default="scope">
                        <div>{{ scope.row.phone }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="是否为管理员">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_superuser" disabled />
                    </template>
                </el-table-column>
                <el-table-column label="角色">
                    <template #default="scope">
                        <el-tag type="primary" v-for="item in scope.row.roles">{{ item.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button color="#626aef" :dark="isDark" @click="edit(scope.row)">编辑</el-button>
                        <el-button color="#626aef" :dark="isDark" plain @click="del_user(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination id="pagination" v-model:current-page="PageNo" v-model:page-size="PageSiez"
                :page-sizes="[10, 20, 30, 40]" background layout=" prev, pager, next, jumper,->,total, sizes"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="width: 100%;" />
        </el-main>
    </el-container>
    <el-dialog v-model="edit_dialog" title="修改用户" width="500">
        <el-form :model="editForm" ref="EditForm" :rules="rules">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="editForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="editForm.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-select v-model="editForm.roles" placeholder="请选择角色">
                    <el-option v-for="item in roles_list" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit_edit">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible" title="添加用户" width="500">
        <el-form :model="form" ref="addForm" :rules="rules">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-select v-model="form.roles" placeholder="请选择角色">
                    <el-option v-for="item in roles_list" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addItem">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="queryinfo" title="查询详情" width="1000" :before-close="handleClose">
        <el-main><el-table :data="infoData" style="width: 100%">
                <el-table-column label="ID" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" width="180">
                    <template #default="scope">
                        <div>{{ scope.row.username }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" width="180">
                    <template #default="scope">
                        <div>{{ scope.row.phone }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="角色">
                    <template #default="scope">
                        <el-tag type="primary" v-for="item in scope.row.roles">{{ item.name }}</el-tag>
                    </template>
                </el-table-column>
            </el-table></el-main>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="queryinfo = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from '../../utils/http.js';
import { ElMessage } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
let tableData = ref([])
let value = ref('')
let username = ref('')
let roles = ref('')
let roles_list = ref([])
let infoData = ref([])
let edit_dialog = ref(false)
let PageNo = ref(1)
let PageSiez = ref(10)
let total = ref(0)
let addForm = ref()
let EditForm = ref()
let editForm = ref({
    id: '',
    username: '',
    roles: '',
    phone: '',
    password: ''
})

const phone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('手机号不能为空'));
    }
    setTimeout(() => {
        let p = /^1[3-9]\d{9}$/;
        if (!p.test(value)) {
            callback(new Error('请输入正确的11位手机号'));
        } else {
            callback()
        }
    }, 100);
};

const rules = reactive({
    phone: [
        { validator: phone, trigger: 'blur' }]
})

function edit(row) {
    edit_dialog.value = true
    editForm.value.id = row.id
    editForm.value.username = row.username
    editForm.value.roles = row.roles[0].id
    editForm.value.phone = row.phone
    editForm.value.password = row.password
}

function submit_edit() {
    if (!EditForm.value) return
    EditForm.value.validate((valid) => {
        if (valid) {
            axios({
                url: 'usermanage/' + editForm.value.id + '/',
                method: 'PUT',
                data: editForm.value
            }).then(res => {
                if (res.data.code === 200) {
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                    edit_dialog.value = false
                    update_list()
                }
            })
        } else {
            ElMessage.warning('信息填写不规范')
        }
    })

}

function get_roles() {
    axios({
        url: 'user/getall_roles/',
        method: 'GET'
    }).then(res => {
        roles_list.value = res.data.data
    })
}

onMounted(() => {
    update_list()
    get_roles()
})

function handleCurrentChange() {
    update_list()
}

function handleSizeChange() {
    update_list()
}

function update_list() {
    axios({
        url: 'user/get_all/',
        method: 'GET',
        params: {
            p_id: PageNo.value,
            p_num: PageSiez.value
        }

    }).then(res => {
        tableData.value = res.data.data
        total.value = res.data.total
    })
}

function onsubmit() {
    queryinfo.value = true
    axios({
        url: 'userinfo/',
        method: 'GET',
        params: {
            username: username.value,
            roles: roles.value,
        }
    }).then(res => {
        infoData.value = res.data.data
    })
}
function del_user(id) {
    axios({
        url: 'usermanage/' + id + '/',
        method: 'DELETE'
    }).then(res => {
        update_list()
    })
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const queryinfo = ref(false)
const form = reactive({
    name: '',
    roles: '',
    phone: ''
})

function addItem() {
    if (!addForm.value) return
    addForm.value.validate((valid) => {
        if (valid) {
            axios({
                url: 'userinfo/',
                method: 'POST',
                data: form
            }).then(res => {
                dialogFormVisible.value = false
                update_list()
            }
            )
        } else {
            ElMessage.warning('信息填写不规范')
        }
    })

}
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>